<template>
  <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header"
            height="680">
    <el-table-column prop="town" label="区镇" width="60" :filters="town" :filter-method="filterHandler"></el-table-column>
    <el-table-column prop="gid" label="序号" width="60"></el-table-column>
    <el-table-column prop="landClass" label="类型" width="100" :filters="type"
                     :filter-method="filterHandler"></el-table-column>
    <el-table-column prop="methods" label="供地方式" width="100" :filters="landClass"
                     :filter-method="filterHandler"></el-table-column>
    <el-table-column prop="type" label="用途" width="100" :filters="landClass"
                     :filter-method="filterHandler"></el-table-column>
    <el-table-column prop="area" label="面积" width="70"></el-table-column>
    <el-table-column prop="name" label="地块名称" width="200"></el-table-column>
    <el-table-column prop="" label="现场踏勘情况" width="200"></el-table-column>
    <el-table-column prop="" label="无人机资料" width="200"></el-table-column>
    <el-table-column prop="threeLand" label="三净地完成情况" width="150"></el-table-column>
    <el-table-column prop="sign" label="收储协议签署情况" width="150" :filters="sign"
                     :filter-method="filterHandler"></el-table-column>
    <el-table-column prop="code" label="收储协议编号" width="100"></el-table-column>
    <el-table-column prop="fileStore" label="收储材料" width="100" :filters="fileStore"
                     :filter-method="filterHandler"></el-table-column>
    <el-table-column prop="evaluationProcess" label="污染调查进度" width="150" :filters="evaluationProcess"
                     :filter-method="filterHandler"></el-table-column>
    <el-table-column prop="company" label="检测单位" width="200"></el-table-column>
    <el-table-column prop="exploreProcess" label="土地平整进度" width="150" :filters="exploreProcess"
                     :filter-method="filterHandler"></el-table-column>
    <el-table-column prop="" label="七评合一其他评价" width="200"></el-table-column>
    <el-table-column prop="finishTime" label="交地日期" width="100"></el-table-column>
    <el-table-column prop="" label="备注" width="200"></el-table-column>
  </el-table>
  <div class="bottom">
    <el-button type="primary" @click="createFile()">导出</el-button>
    <el-button type="primary" @click="handleExit()">返回</el-button>
  </div>
</template>


<script lang="ts">
import {defineComponent, getCurrentInstance, onMounted, reactive, ref, watch} from "vue";
import {useRouter} from "vue-router";
import type {TableColumnCtx} from 'element-plus/es/components/table/src/table-column/defaults'
import {ElNotification} from "element-plus";
import Data from "../../../../../public/config/data.json";

export default defineComponent({
  name: "index",
  setup() {
    interface User {
      town: string
      type: string
      landClass: string
      sign: string
      fileStore: string
      evaluationProcess: string
      exploreProcess: string
    }

    const property = ref('')
    const {appContext} = getCurrentInstance();
    const router = useRouter();
    const formObj = reactive({
      id:'1',
      filePath:''
    })
    const tableData = reactive([])
    watch(()=>property.value,()=>{
      reload()
    })
    //筛选
    const filterHandler = (value: string, row: User, column: TableColumnCtx<User>) => {
      property.value = column['property']
      return row[property.value] === value
    }
    //区镇
    const town = reactive(Data).town
    //类型
    const type = reactive(Data).type
    //供地方式
    const landClass = reactive(Data).landClass
    //收储协议签署情况
    const sign = reactive(Data).sign
    //收储材料
    const fileStore = reactive(Data).fileStore
    //污染调查进度
    const evaluationProcess = reactive(Data).evaluationProcess
    //土地平整进度
    const exploreProcess = reactive(Data).evaluationProcess
    //下载excel表
    const downloadFile=()=>{
      appContext.config.globalProperties.axios({
        url: `api/downloadWord`,
        method: 'post',
        transformRequest: [function () {
          let oMyForm = new FormData();
          oMyForm.append("landId",formObj.id);
          oMyForm.append("path", formObj.filePath);
          return oMyForm;
        }],
        responseType: "blob",
      }).then((response) => {
        let blob = new Blob([response.data], {type: "application/vnd.ms-excel;"}); // 为blob设置文件类型，这里以.xlsx为例
        let url = window.URL.createObjectURL(blob); // 创建一个临时的url指向blob对象
        let a = document.createElement("a");
        a.href = url;
        a.download = "太仓各市地块数据";
        a.click();
        // 释放这个临时的对象url
        window.URL.revokeObjectURL(url);
      }).catch(() => {
        ElNotification({
          title: '下载文件',
          message: "文件未生成,请重新生成",
          type: 'warning',
          position: 'top-left',
          offset: 300,
        })
      })
    }
    //创建excel表
    const createFile = () => {
      appContext.config.globalProperties.axios({
        url: 'api/createFile/landForm',
        method: 'post',
      }).then((response) => {
        formObj.filePath = response.data
        downloadFile()
        ElNotification({
          title: '导出数据',
          message: "导出成功",
          type: 'success',
          position: 'top-left',
          offset: 300,
        })
      })

    }
    //刷新数据
    const reload = () => {
      appContext.config.globalProperties.axios({
        url: 'api/search/landForm',
        method: 'post',
      }).then((response) => {
        response.data.forEach((item) => {
          let object = {
            town: '',
            gid: '',
            name: '',
            area: '',
            type: '',
            methods:'',
            landClass: '',
            sign: '',
            code: '',
            threeLand:'',
            fileStore: '',
            evaluationProcess: '',
            company: '',
            exploreProcess: '',
            finishTime:''
          }
          object.town = item.town
          object.gid = item.gid
          object.name = item.name
          object.area = item.area
          object.type = item.type
          object.landClass = item.landClass
          object.methods = item.methods
          object.sign = item.sign
          object.code = item.code
          object.threeLand = item.threeLand==="111"?"已完成":"未完成"
          object.fileStore = item.fileStore
          object.evaluationProcess = item.evaluationProcess
          object.company = item.company
          object.exploreProcess = item.exploreProcess
          object.finishTime = item.finishTime
          tableData.push(object)
        })
      })
    }
    const addFormVisible = ref(false)
    const editFormVisible = ref(false)
    const handleExit = () => {
      router.push({
        name: "landpoint",
      })
    }
    onMounted(() => {
      if (!sessionStorage.getItem('loginName') || !localStorage.getItem('loginName')) {
        localStorage.clear()
        router.push({
          name: "landpointtc",
        })
      }
      reload()
    })
    return {
      tableData,
      addFormVisible,
      editFormVisible,
      reload,
      handleExit,
      router,
      filterHandler,
      createFile,
      town,
      type,
      landClass,
      sign,
      fileStore,
      evaluationProcess,
      exploreProcess
    }
  }
})
</script>

<style lang="scss">
.table-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;

  .right-text[data-v-b659a5a2] {
    width: 10.04167vw
  }

  .right {
    color: #e9e9e9;

    .el-input__wrapper {
      background-color: rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(245, 248, 255, 0.25);
    }
  }

  //.common-form-item{
  //  .right{
  //    color: #e9e9e9;
  //    .el-input__wrapper {
  //      background-color: rgba(0, 0, 0, 0.2);
  //      border: 1px solid rgba(245, 248, 255, 0.25);
  //    }
  //  }
  //}

}

.tips-text {
  margin-left: 30px;
  color: #e9e9e9;
}

.bottom {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
